Code Playground

console.log("Event Fired")
const cv = document.getElementById("canvasMain");
const ctx = cv.getContext("2d");
const fps = 1000 / 60;
var frame = 0;

const wheelData = [10, 7, 4, 10, 9, 10, 8, 10];
const wheelColors = ["red", "green", "yellow", "blue", "cyan", "magenta", "lime", "gray"];

var wheelPos = {x: 0, y: 0};
var wheelSize = 6;
var wheelAngle = 0;
var wheelDir = 1;
var wheelPercentage = 0;

var ps = {x: 10, y: 130};
var pc = {x: 200, y: 210};
var pe = {x: 450, y: 250};

// LOOP:
setInterval(() => {
  update();
  
  ctx.clearRect(0, 0, cv.width, cv.height);
  draw();
  frame++;
}, fps);

// EVENTS:
var mouseDown = false;
window.addEventListener("mousedown", (event) => {
  mouseDown = true;
});
window.addEventListener("mouseup", (event) => {
  mouseDown = false;
});
window.addEventListener("touchmove", (event) => {
  if (true) // "mousemove" -> mouseDown
  {
    pc.x = event.touches[0].pageX;
    pc.y = event.touches[0].pageY;
  }
});

// UPDATES:
function update() {
  var prevWheelPos = wheelPos;
  wheelPos = getCurveXYatPercent(ps.x, ps.y, pc.x, pc.y, pe.x, pe.y, wheelPercentage);
  var wheelDirNormalNormalizedVec = {x: -(wheelPos.x - prevWheelPos.x), y: (wheelPos.y - prevWheelPos.y)};
  var mag = Math.sqrt(Math.pow(wheelDirNormalNormalizedVec.x, 2) + Math.pow(wheelDirNormalNormalizedVec.y, 2));
  
  if (wheelPercentage <= 0) wheelDir = 1;
  else if (wheelPercentage >= 1) wheelDir = -1;
  wheelPercentage += wheelDir * 0.01;
  
  var travelDist = Math.sqrt(Math.pow(wheelPos.x - prevWheelPos.x, 2) + Math.pow(wheelPos.y - prevWheelPos.y, 2));
  var circumference = (2 * Math.PI) * (wheelData[0] * wheelSize);
  wheelAngle += (2 * Math.PI) * (travelDist / circumference);
}

// RENDERS:
function draw() {
  // Curve:
  ctx.beginPath();
  ctx.moveTo(ps.x, ps.y);
  ctx.quadraticCurveTo(pc.x, pc.y, pe.x, pe.y);
  ctx.stroke();
  ctx.beginPath();
  ctx.arc(pc.x, pc.y, 5, 0, Math.PI * 2);
  ctx.stroke();
  
  // Wheel:
  const angleStep = (Math.PI * 2) / wheelData.length;
  for (i = 0; i < wheelData.length; i++)
  {
    var r = wheelData[i] * wheelSize;
    ctx.fillStyle = wheelColors[i];
    ctx.beginPath();
    ctx.arc(wheelPos.x, wheelPos.y, r, wheelAngle + i * angleStep, wheelAngle + (i + 1) * angleStep);
    ctx.lineTo(wheelPos.x, wheelPos.y);
    ctx.fill();
  }
}

// OTHER FUNCTIONS:
function getCurveXYatPercent(startPx, startPy, controlPx, controlPy, endPx, endPy, percent) {
  var xAtPercent = Math.pow(1 - percent, 2) * startPx + 2 * (1 - percent) * percent * controlPx + Math.pow(percent, 2) * endPx; 
  var yAtPercent = Math.pow(1 - percent, 2) * startPy + 2 * (1 - percent) * percent * controlPy + Math.pow(percent, 2) * endPy; 
  return({x: xAtPercent, y: yAtPercent});
}

Frontend Forever App